﻿@{
    ViewBag.Title = "商品购买";
}
@using HCQ2_Model.ShoppingCart;
@section headerSection{
    <style>
        body{
            font-family:'微软雅黑';
            font-size:14px;
            color:#676a6c;
        }
        a{
            font-size:15px;
        }

        .ShoppingCart th{
			text-align:center;
		}
		.ShoppingCart td{
			text-align:center;
		}
        .ShoppingCart tr:hover {
            background-color:gainsboro;
        }
		.commodity{
			height:100px;
			width:100%;
		}
		.commodity td{
			text-align:left;
		}
    </style>
}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <table class="table ShoppingCart">
            <thead>
                <tr>
                    <th>商品信息</th>
                    <th>价格</th>
                    <th>期限</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                @{
                    foreach (ShoppingCartListModel info in ViewBag.FilePayInfo)
                    {
                        <tr id="@info.FileId" class="ShoppingCartTr">
                            <td>
                                <table class="commodity">
                                    <tr>
                                        <td rowspan="3" style="width:110px;">
                                            <img style="width:100px;height:100px;" src="@info.FileImgUrl" />
                                        </td>
                                        <td style="margin:0px 5px;width:35%;">
                                            @info.FileName
                                        </td>
                                        <td>
                                            格式：@info.ProForm
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            产品类别：@info.ProType
                                        </td>
                                        <td>
                                            作者：@info.CreateName
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            @if (info.SupplyType==1)
                                            {
                                            <span style="background-color:#FF6600;color:#FFFFFF;font-size:200;padding:2px 5px;">自营商品</span>
                                            }
                                        </td>
                                        <td>
                                            时间：@info.CreateTime
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td class="Money">￥@info.Price</td>
                            <td>
                                <select class="FileMoneySelect">
                                    @foreach (ShoppingCartFileMoney fileMoney in info.FileMoneys)
                                    {
                                    <option value="@fileMoney.Month" money="@fileMoney.Price">@fileMoney.Month 个月</option>
                                    }
                                </select>
                            </td>
                            <td class="Money1" style="color:red;">￥@info.Price</td>
                            <td><a href="javascript:DelCommodity(@info.FileId);">删除</a></td>
                        </tr>
                    }
                }
            </tbody>
        </table>
        <p style="text-align:right;"><span style="font-size:150%;">已选商品<span id="PurchaseCount">0</span>件 订单总价：</span><span id="TotalPrice" style="width:160px;display:inline-block;color:red;font-size:200%;padding-right:30px;">￥00.00</span></p>
        <p style="text-align:right;"><span style="font-size:150%;">赠送币：</span><span id="PreferentialAmount" style="width:160px;display:inline-block;font-size:160%;padding-right:30px;">-￥00.00</span></p>
        <p style="text-align:right;"><span style="font-size:150%;">实付款：</span><span id="PayPrice" style="width:160px;display:inline-block;color:red;font-size:200%;padding-right:30px;">￥00.00</span></p>
        <p style="text-align:right;"><span style="font-size:150%;">支付密码<span style="color:red;margin-right:10px;">*</span></span><input id="UserPayPassword" autocomplete="off" type="password" style="width:200px;padding:5px 7px;" /></p>
        <p style="text-align:right;">
            <button type="button" class="btn btn-danger" style="margin-right:20px;width:150px;" onclick="SubmitOrderPay();">提交订单并支付</button>
            <button type="button" class="btn btn-default" style="margin-right:10px;width:150px;" onclick="CloseDialog();">取消</button>
        </p>
    </div>
</div>

@section footSection{
    <script>
        var UserID = '@ViewBag.UserId';
        var RequestUrl = '@ViewBag.ApiUrl';

        $(function () {
            MonthChangeEvent();
            CalculatedAmount();
        });

        //月份变更联动金额
        function MonthChangeEvent() {
            $('.FileMoneySelect').on('change', function () {
                var money = $(this).find('option:selected').attr('money');

                var rowId = $(this).parents('tr').attr('id');

                $('#' + rowId + ' .Money1').text('￥' + money);
                console.log('选择月份：' + $(this).val() + '，金额：' + money);

                CalculatedAmount();
            });
        }
        //是否有商品期限为空的
        var isPurchNull = false;
        //获取当前购买商品ID和期限
        function GetCommodifyInfo() {
             var CurrentCommodityInfo = [];

            $('.ShoppingCartTr').each(function () {
                var commodityInfo = {};
                //文件ID
                commodityInfo.CommodityId = $(this).attr('id');
                //购买期限
                commodityInfo.PurchasePeriod = $(this).find('.FileMoneySelect').val();

                if (commodityInfo.PurchasePeriod == null) {
                    isPurchNull = true;
                }
                CurrentCommodityInfo.push(commodityInfo);
            });
            return CurrentCommodityInfo;
        }
        //计算金额
        function CalculatedAmount() {
            var CurrentCommodityInfo = GetCommodifyInfo();

            $('#PurchaseCount').text(CurrentCommodityInfo.length);
            var CommodityPayInfo = { userid:UserID, CommodityIds: CurrentCommodityInfo };

            console.log('当前购买信息如下：');
            console.table(CurrentCommodityInfo);

            console.table(CommodityPayInfo);

            if (isPurchNull) {
                layer.alert('有文件购买期限价格信息未设置请移除', { icon: 5 });
                isPurchNull = false;
                return;
            }

            var loadIndex;
            $.ajax({
                url: RequestUrl + 'api/Pay/GetPaymentAmount',
                type: 'post',
                data: JSON.stringify(CommodityPayInfo),
                contentType: "application/json",
                beforeSend: function () {
                    loadIndex = layer.msg('获取价格信息',{icon:16,shade:[0.3,'#393D49'],time:0});
                },
                success: function (server) {
                    layer.close(loadIndex);
                    if (server.errcode == 0) {
                        $('#TotalPrice').text('￥' + server.value.CommodityMoney);
                        $('#PayPrice').text('￥' + server.value.PaymentAmount);
                        $('#PreferentialAmount').text('-￥' + server.value.PreferentialAmount);
                    } else {
                        alert(server.errmsg);
                    }
                },
                error: function () {
                    layer.msg('服务器繁忙请稍后再试！', {icon:5});
                }
            });
        }

        //删除商品
        function DelCommodity(id) {
            $('#' + id).remove();

            CalculatedAmount();
        }

        //关闭窗口
        function CloseDialog() {
            window.parent.docManager.closePayForm();
        }

        //提交订单并支付
        function SubmitOrderPay() {
            var CurrentCommodityInfo = GetCommodifyInfo();

            if (isPurchNull) {
                layer.alert('有文件购买期限价格信息未设置请移除', { icon: 5 });
                isPurchNull = false;
                return;
            }

            var UserPayPassword = $('#UserPayPassword').val();
            if (UserPayPassword == "" || typeof UserPayPassword === 'undefined' || UserPayPassword == null) {
                 layer.msg('请输入支付密码', {icon:5});
                return;
            }
            var loadIndex = layer.msg('提交订单并支付中...', { icon: 16, shade: [0.3, '#393D49'], time: 0 });

            //验证支付密码是否正确
            CheckPayPwd(loadIndex, UserPayPassword, function () {
                 SubmitOrder(loadIndex, function (ParentOrderCode) {
                    PayOrder(loadIndex, ParentOrderCode);
                 });
            });

        }

        //验证支付密码
        function CheckPayPwd(loadIndex,UserPayPassword,callback) {
            var data = {userid:UserID,PayPwd:UserPayPassword};
             $.ajax({
                url: RequestUrl + 'api/Pay/PayPwdCheck',
                type: 'post',
                data: JSON.stringify(data),
                contentType: "application/json",
                success: function (server) {
                     if (server.errcode == 0) {
                        if (!server.value) {
                            layer.close(loadIndex);
                            layer.alert('支付密码错误！', {icon:5});
                        } else {
                            callback();
                        }
                     } else {
                        layer.close(loadIndex);
                         layer.alert('验证支付密码出现错误：' + server.errmsg, {icon:5});
                    }
                },
                error: function () {
                     layer.msg('服务器繁忙请稍后再试！', {icon:5});
                }
            });
        }

        //提交订单
        function SubmitOrder(loadIndex,callback) {
            var CurrentCommodityInfo = GetCommodifyInfo();
            var data = {
                "userid": UserID,
                "OrderSource": "web",
                "CommodityInfos": CurrentCommodityInfo,
                "SubmitType": 1
            };

            $.ajax({
                url: RequestUrl + 'api/Pay/SubmitOrder',
                type: 'post',
                data: JSON.stringify(data),
                contentType: "application/json",
                success: function (server) {
                    if (server.errcode == 0) {
                        callback(server.value);
                    } else {
                        layer.close(loadIndex);
                        layer.alert('创建订单出现错误：' + server.errmsg, { icon: 5 });
                    }
                },
                error: function () {
                    layer.close(loadIndex);
                    layer.msg('服务器繁忙请稍后再试！', {icon:5});
                }
            });
           
        }

        //付款订单
        function PayOrder(loadIndex,ParentOrderCode) {
            var data = {
                "ParentOrderCode": ParentOrderCode,
                "PayMethod": 1,
                "userid": UserID
            };

            $.ajax({
                url: RequestUrl + 'api/Pay/Payment',
                type: 'post',
                data: JSON.stringify(data),
                contentType: "application/json",
                success: function (server) {
                    layer.close(loadIndex);
                    if (server.errcode == 0) {
                        layer.alert('付款下单成功，父订单编号：' + ParentOrderCode, {icon:1}, function () {
                            CloseDialog();
                        });
                    } else {
                        layer.alert('创建订单成功，付款订单出现错误：' + server.errmsg, { icon: 5 });
                    }
                },
                error: function () {
                    layer.close(loadIndex);
                    layer.msg('服务器繁忙请稍后再试！', {icon:5});
                }
            });
        }
    </script>
}
